<template>
    <div class="home-page">
        <site-header></site-header>
        <site-menus ref="menus"></site-menus>
        <div class="content">
            <div class="first">首页->投诉举报</div>
            <div class="line"></div>
            <Row>
                <Col span="6">
                    <left-button :list="buttonList" @result="resultAction"></left-button>
                </Col>
                <Col span="18">
                    <right-content :isShow="rightShow==2" @result="resultAction"></right-content>
                    <right-content2 :isShow="rightShow==1" :list="list"></right-content2>
                    <right-report-content1 :isShow="rightShow==3" @result="saveReport"></right-report-content1>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>

import SiteMenus from '../home/compoments/site-menus/index'
import SiteHeader from '../home/compoments/site-header/index'
import LeftButton from './components/left-button/index'
import RightContent2 from './components/right-content2/index'
import RightContent from './components/right-content/index'
import { getReportContentList, addOnlineReport } from '@/api/site'
import RightReportContent1 from './components/right-report-content1/index'
export default {
  components: { RightReportContent1, RightContent, RightContent2, LeftButton, SiteHeader, SiteMenus },
  data () {
    return {
      rightShow: '1',
      buttonList: [
        {
          content: '受理举报内容',
          id: '1'
        },
        {
          content: '举报方式',
          id: '2'
        }
      ],
      list: []
    }
  },
  methods: {
    getList () {
      getReportContentList().then(ret => {
        this.list = ret.data.data.list
      })
    },
    resultAction (id) {
      this.rightShow = id
    },
    saveReport (formItem) {
      addOnlineReport(formItem).then(ret => {
        if (ret.data.errcode === 1001) {
          this.$Modal.success({
            title: '举报成功',
            onOk: () => {
              this.resultAction(2)
            }
          })
        } else {
          this.$Message.error('操作失败')
        }
      })
    }
  },
  mounted () {
    if (this.$route.query.name === 3) {
      let id = this.$route.query.name
      this.resultAction(id)
      this.getList()
    } else {
      this.$refs.menus.changeColor = this.$route.query.index
      this.getList()
    }
  }
}
</script>

<style scoped lang="less">
    .home-page{
        height: 100%;
        overflow: scroll;
    }
    .content {
        height: 1100px;
        width: 94%;
        margin-left: 3%;
    }
    .first{
        font-size: 20px;
        color: black;
        font-weight: bolder;
        margin-left: 40px;
        height: 60px;
        line-height: 60px;
    }
    .line{
        height: 5px;
        background-color: #0166b6;
    }
</style>
